<div class="ngm-theme-dark dark w-[300px] shrink-0 flex flex-col justify-start overflow-auto bg-bluegray-700 text-white p-4 group">
  <div class="w-full flex justify-start items-center my-2" cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
    <mat-icon displayDensity="cosy" class="-ml-2 opacity-0 group-hover:opacity-80">drag_indicator</mat-icon>
    <span class="text-lg pointer-events-none">
      {{ 'Story.Common.StoryTemplates' | translate: { Default: 'Story Templates' } }}
    </span>
  </div>

  <mat-nav-list class="ngm-nav-list flex-1 overflow-auto">
    <mat-list-item *ngFor="let menu of menus" [class.active]="activeLink === menu.link"
      (click)="onActive(menu)">
      <span >{{ menu.label }}</span>
   </mat-list-item>
  </mat-nav-list>

  <div class="flex justify-start">
    <div ngmButtonGroup>
      <button mat-raised-button color="accent" cdkFocusInitial [mat-dialog-close]="true" (click)="onApply()">
        {{ 'STORY.COMMON.APPLY' | translate: { Default: 'Apply' } }}
      </button>
    </div>
  </div>
  
</div>

<div class="p-8 flex-1 h-full overflow-auto">
  <div *ngFor="let schema of schemas" class="flex-1 overflow-auto">
    <formly-form
      [fields]="schema.fields"
      [options]="schema.options"
      [form]="schema.form"
      [model]="schema.model"
      (modelChange)="onModelChange(schema.key, $event)"
    ></formly-form>
  </div>
</div>
